<template>
  <view class="order-goods-bill">
    <navigator :url="`/pages/category/goodsDetail?id=${item.goods_id_}`" class="product" v-for="item in data"
      :key="item.goods_id_">
      <image class="product_img" :src="item.product_img_" mode="aspectFill" />
      <view>
        <view class="product_name ellipsis">{{ item.goods_name_ }}</view>
        <view class="product_footer">
          规格编号：{{ item.goods_code_ }}
        </view>
        <view class="product_footer">
          规格：{{ item.product_id_ }}
        </view>
        <view class="product_footer">
          <text>￥{{ item.cal_price_ }}</text>
          <text>x{{ item.number_ }}</text>
        </view>
      </view>
    </navigator>
  </view>
</template>

<script lang="ts" setup>
import type { orderItemData } from "@/types/order"
import { computed } from "vue"

const props = defineProps<{
  list: string
}>()

const data = computed((): orderItemData[] => {
  return JSON.parse(props.list)
})

</script>

<style lang="scss">
page {
  background: #f6f6f6;
}

.order-goods-bill {
  padding: 12px;

  .product {
    margin-bottom: 12px;
    background-color: #fff;
    display: flex;
    padding: 4px;
    border-radius: 4px;

    .product_img {
      width: 158px;
      height: 108px;
      margin-right: 12px;
      border-radius: 4px;
    }

    .product_name {
      $padding: 4px;
      padding: $padding ;
      width: calc(100% - 2 * $padding);
      font-size: 14px;
    }

    .product_footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 2px;
      font-size: 14px;
      color: $uni-text-color-grey;
    }
  }
}
</style>
